<template>
  <div class="rate">
    <div class="header clearfix">
      <div class="header-avatar por fl">
        <img src="../../images/center/rate_book_03.png" class="avatar-inner abs-mc vam"/>
      </div>
      <div class="count" v-for="item in counts" :key="item.name">
        <div class="c-name dib vat">{{item.name}}</div>
        <div class="c-time" v-html="formatTimes(info[item.prop])"></div>
      </div>
    </div>
    <div class="study">
      <div class="gl-title">学习记录</div>
      <div class="study-array">
        <div class="s-item flex jcb" v-for="(list, i) in studyType" :key="i">
          <div class="s-type clearfix" v-for="(type, j) in list" :key="j">
            <img :src="type.icon" class="icon vat fr"/>
            <div>
              <div class="s-name">{{type.name}}</div>
              <div class="s-unit">{{info[type.prop] || 0}}{{type.unit}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="time">
      <div class="gl-title time-title">学习时长</div>
      <div class="time-body">
        <ul>
          <li class="time-li" v-for="(item,index) in icons" :key="index" v-if="info[item.prop]">
            <div class="time-li-left">
              <img :src="item.icon" alt/>
            </div>
            <div class="time-li-right">
              <span>{{item.name}}</span>
              <div v-html="formatTimes(info[item.prop], 1)"></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="nomore tac">
      <span>没有更多~</span>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';

  export default {
    name: "Rate",
    computed: {
      ...mapGetters(['userInfo'])
    },
    data() {
      return {
        info: {},
        counts: [
          {
            name: "总学习",
            prop: 'totalTime',
          },
          {
            name: "今天学习",
            prop: 'todayTime',
          }
        ],
        studyType: [
          [
            {
              icon: require("../../images/center/rate_type_07.png"),
              name: "视频",
              prop: "video",
              unit: "节"
            },
            {
              icon: require("../../images/center/rate_type_09.png"),
              name: "单词",
              prop: "word",
              unit: "个"
            }
          ],
          [
            {
              icon: require("../../images/center/rate_type_13.png"),
              name: "习题",
              prop: "exercises",
              unit: "道"
            },
            {
              icon: require("../../images/center/rate_type_15.png"),
              name: "益智",
              prop: "helpful",
              unit: "关"
            }
          ]
        ],
        icons: [
          {
            icon: require("../../images/center/subject_ico_20.png"),
            name: "语文",
            prop: "yw"
          },
          {
            icon: require("../../images/center/subject_ico_23.png"),
            name: "数学",
            prop: "sx"
          },
          {
            icon: require("../../images/center/subject_ico_25.png"),
            name: "英语",
            prop: "yy"
          },
          {
            icon: require("../../images/center/subject_ico_27.png"),
            name: "政治",
            prop: "zz"
          },
          {
            icon: require("../../images/center/subject_ico_29.png"),
            name: "历史",
            prop: "ls"
          },
          {
            icon: require("../../images/center/subject_ico_31.png"),
            name: "地理",
            prop: "dl"
          },
          {
            icon: require("../../images/center/subject_ico_33.png"),
            name: "物理",
            prop: "wl"
          },
          {
            icon: require("../../images/center/subject_ico_35.png"),
            name: "化学",
            prop: "hx"
          },
          {
            icon: require("../../images/center/subject_ico_37.png"),
            name: "生物",
            prop: "sw"
          }
        ]
      };
    },
    created() {
      this.util.checkOpenId(this.getInfo);
    },
    methods: {
      formatTimes(time, hours) {
        time *= 1;
        time = time || 0;
        let html = '';
        if (time < 60 * 60 * 1000 && !hours) {
          html = `<span class="num">$mm</span>分钟`;
        } else {
          html = `<span class="num">$H</span>小时&nbsp;&nbsp;<span class="num">$mm</span>分钟`;
        }
        return this.util.numberToTime(time, html, "\\$");
      },
      getInfo() {
        this.http.$post('webcat/api/learning_info', {
          uid: this.userInfo.uid,
        }).then(res => {
          let info = res.learning_info;
          if (info) {
            this.info = JSON.parse(info);
          }
        }).catch(this.$err);
      },
    },
  };
</script>

<style scoped lang="less">
  .rate {
    .header {
      padding: 0.81rem 1.56rem 1.69rem;
      background: url(../../images/center/rate_bg_02.png) no-repeat top left /
        100%;
      color: #fff;
      font-size: 0.88rem;
      .count {
        padding: 0.44rem 0 0.56rem;
        line-height: 1;
      }
      .c-name {
        margin-bottom: 0.47rem;
        padding: 0 0.5rem;
        font-size: 0.81rem;
        line-height: 1.25rem;
        border-radius: 1.25rem;
        border: solid 0.06rem #fff;
      }
      .c-time {
        /deep/ .num {
          margin-right: .28rem;
          font-size: 1.38rem;
          font-weight: bold;
        }
      }
      .header-avatar {
        margin-right: 2.56rem;
        width: 7.5rem;
        height: 7.5rem;
        background-color: #eaf4ff;
        box-shadow: -0.05rem -0.03rem 0.56rem 0 rgba(0, 0, 0, 0.2);
        border-radius: 50%;
      }
      .avatar-inner {
        width: 3.94rem;
      }
    }

    .study {
      margin: 0.5rem 0 1.25rem;
      padding: 0 1.25rem;
      .study-array {
        :first-child {
          .s-type {
            &:first-child {
              margin-right: 0.94rem;
              background-color: #d2f6f6;
            }
            &:nth-child(2) {
              background-color: #f4e8fc;
            }
          }
        }
        :nth-child(2) {
          .s-type {
            &:first-child {
              margin-right: 0.94rem;
              background-color: #fddedc;
            }
            &:nth-child(2) {
              background-color: #def6ff;
            }
          }
        }
      }

      .s-type {
        width: 10rem;
        margin-top: 0.94rem;
        height: 4.69rem;
        border-radius: 0.31rem;
        padding: 0 0.94rem;
        > div {
          padding: 1.03rem 0;
        }
        .s-unit {
          font-size: 0.88rem;
          color: #666666;
        }
        img {
          margin: 0.56rem 0;
          width: 3.56rem;
          height: 3.56rem;
        }
      }
    }
    .time {
      .time-title {
        margin: 0 1.25rem 0.88rem;
      }
      .time-body {
        border-top: 0.06rem solid #eeeeee;
        padding: 0 1.25rem;
        .time-li {
          display: flex;
          margin-top: 0.94rem;

          .time-li-left {
            // flex: 2;
            img {
              width: 3.13rem;
              height: 3.13rem;
            }
          }
          .time-li-right {
            flex: 1;
            display: flex;
            // padding: 0 0.66rem;
            margin-left: 0.66rem;
            padding-right: 0.59rem;

            border-bottom: 0.03rem solid #eaeaea;
            justify-content: space-between;
            align-items: center;
            color: #666;
            font-size: .88rem;
            /deep/ .num {
              margin-right: .28rem;
              font-size: 1.13rem;
              color: #333;
            }
          }
        }
      }
    }
    .nomore {
      background: #f5f5f5;
      // height: 1.88rem;
      padding: 0.44rem 0 0.75rem;
      span {
        width: 3.38rem;
        // height: 0.69rem;
        font-family: SourceHanSansCN-Regular;
        font-size: 0.75rem;
        font-weight: normal;
        font-stretch: normal;
        // line-height: 1.27rem;
        letter-spacing: 0rem;
        color: #999999;
      }
    }
  }
</style>
